import React, { Component } from 'react';
import { View, StyleSheet, ScrollView, Dimensions, Platform, ToastAndroid, TouchableHighlight, Alert, } from 'react-native'
import { Container, Content, List, ListItem, Text, Body, Thumbnail, Spinner, Icon, Button, Toast, Radio } from 'native-base'
import Collapsible from 'react-native-collapsible';
import { connect } from 'react-redux';
import URL from '../../net/url.js';
const { width, height } = Dimensions.get('window');
const marginTop = Platform.OS === 'ios' ? 20 : 0;
class course_class_list extends Component {
     static navigationOptions = ({ navigation }) => ({
        title: navigation.state.params.title,
    });
    constructor(props) {
        super(props);
        this.state = {
            selectedItem: -1,
            content: null,
            radio: -1,
        }
    }
    render() {
        if (!this.state.content) {
            return this.renderLoadingView();
        }
        return (
            <Container  >
                <Content>
                    <ListItem itemDivider>
                        <Icon name='ios-paper-outline' />
                        <Body>
                            <Text >答题列表</Text>
                        </Body>
                    </ListItem>
                    {this.renderContent(this.state.content)}
                </Content>
            </Container>
        );
    }
    componentDidMount() {
        this.fetchData();
    }
    //通过mooc课程id获得课程学生列表（含班级号）
    fetchData() {
        //获取当前登录用户账号
        const { login_info } = this.props;
        let keymap = {
            method: 'GET',
            headers: { 'userID': login_info.userName },
        };
        fetch(URL. getUserAnsweredSubject_URL, keymap).then(
            (result) => {
                console.log('历史答题列表result' );
                console.log(result);
                result.json().then(
                    (resultData) => {
                        if(resultData != undefined && resultData.length > 0)
                        {
                        console.log(resultData);
                        var out = {};
                        resultData.forEach((item) => {
                            out[item.interactionCourseID] = [];
                        });
                        resultData.forEach((item) => {
                            out[item.interactionCourseID].push(item);
                        });
                        let outArray = []
                        for (let key in out) {
                            outArray.push({ title: key, content: out[key] });
                            console.log('outArray');
                            console.log(outArray);
                        }
                        this.setState({ content: outArray });
                    }
                    else{
                        Alert.alert('温馨提醒:', '历史题目为空');
                    }
                        
                    }
                ).catch(
                    (error) => {
                        console.log(error);
                    }
                    )
            }
        ).catch((error) => { console.log('error:' + error); });
    }
    //加载等待的view
    renderLoadingView() {
        return (
            <Container>
                <Content>
                    <Spinner color='green' />
                </Content>
            </Container>
        );
    }
    //加载下拉下单组件上
    renderContent(l) {
        const { navigate } = this.props.navigation;
        const { objectIdAnswerListStu } = this.props;
        return l.map((v, i) => {
            return (
                <View key={i} >
                    <List>
                        <ListItem button style={StyleSheet.flatten(styles.view)} onPress={() => { this.setState({ selectedItem: i }) }}>
                            <Body >
                                <Text style={StyleSheet.flatten(styles.text_style)}>交互课程：{v.title}</Text>
                                {/*{console.log(v.chapterTitle)}*/}
                            </Body>
                            <Thumbnail square size={20} style={StyleSheet.flatten(styles.nextIcon)} source={require('../../images/back.png')} />
                        </ListItem>
                    </List>
                    <Collapsible collapsed={this.state.selectedItem === i ? false : true}>
                        <ScrollView ref={(scrollView) => { _scrollView = scrollView; }} style={StyleSheet.flatten(styles.ScrollView)}>
                            <List style={StyleSheet.flatten(styles.List)}>
                                {v.content.map((v, j) => {
                                    return (
                                        <ListItem key={j} style={StyleSheet.flatten(styles.height)}
                                        onPress={() => {
                                            objectIdAnswerListStu({
                                            type: 'GetObjectIdAnswerListStu',
                                            payload: {
                                                ObjectIdAnswerList: v.subjectID,
                                                ObjectTypeAnswerList: v.subjectType,
                                                ObjectTitleAnswerList: v.stemInfo,
                                            }
                                        });
                                        this.props.navigation.dispatch('QuestionStudentBefore'); 
                                         navigate('QuestionStudentBefore');
                                            }}
                                       

                                 
                                        >
                                            <Text style={StyleSheet.flatten(styles.text_style2)}>{v.stemInfo}</Text> 
                                        </ListItem>
                                    );
                                })}
                            </List>
                        </ScrollView>
                    </Collapsible>
                </View>
            );
        })
    }
}
const styles = StyleSheet.create({
    button_default: {
        marginTop: 40,
        width: width / 4,
        height: 30,
        alignSelf: 'center',
        backgroundColor: 'white',
    },
    view: {
        marginRight: 0,
        marginLeft: 0,
        backgroundColor: 'white',
        borderBottomWidth: 0.2,
        borderBottomColor: "#cac0c0",
    },
    ListItem: {
        paddingLeft: 20,
    },
    Container: {
        marginTop: 20,
    },
    List: {
        paddingLeft: 30,
        backgroundColor: 'white',

    },
    text_style: {
        //fontFamily:'微软雅黑',
        fontSize: 15,
        color: '#353535',
        paddingLeft: 15,
    },
    text_style2: {
        //fontFamily:'微软雅黑',
        fontSize: 13,
        color: '#353535',
        paddingLeft: 15,
    },
    nextIcon: {
        width: 20,
        height: 20,
        marginRight: 20,
        opacity: 0.6,
    },
    ScrollView: {
        height: 200,

    },
    height: {
        height: 40,

    },

});
function mapStateToProps(state) {
    return {
         login_info: state.login.login_info
    }
}

function mapDispatchToProps(dispatch) {
    return {
        objectIdAnswerListStu: (state) => dispatch(state)
    }
}
const CourseClassList = connect(
    mapStateToProps,
    mapDispatchToProps
)(course_class_list)

export default CourseClassList;
